import React, { useRef, useState } from 'react'
import '../assets/Title.moudle.css'

interface Props {
    
}

export const Title = (props: Props) => {
    let arr=[
        {
            id:0,
            name:'全部',
            list:['邀请函','h5模版','招聘','大暑','公众号','抽奖','旅游相册']
        },
        {
            id:1,
            name:'H5',
            list:['邀请函','招聘','峰会邀请函','会议邀请','h5模版']
        },
        {
            id:2,
            name:"海报",
            list:['大暑','邀请函','招聘','早安','喜报','会议流程','科技']
        },
        {
            id:3,
            name:"长页",
            list:['邀请函','公众号','企业邀请函','工作简报','招聘']
        },
        {
            id:4,
            name:"表单",
            list:['报名','邀请函','投票','分享','七夕','招生问卷调查']
        },
        {
            id:5,
            name:"互动",
            list:['七夕','小游戏','抽奖','奥运','打卡','红包雨','翻牌']
        },
        {
            id:6,
            name:"电子画册",
            list:['电子画册','幼儿园招生','企业宣传册','招商','','地产','旅游']
        },
        {
            id:7,
            name:"视频",
            list:['片头片尾','邀请函','大暑','新闻','颁奖','企业宣传片']
        },
        {
            id:8,
            name:"解决方案",
            list:['邀请函','邀请函','医院','邀请函']
        }
    ]
    let [idi,setI]=useState(0)
    let [name,setName]=useState('全部')
     let [list,setList]=useState(['邀请函','h5模版','招聘','大暑','公众号','抽奖','旅游相册'])
   const clik=(a:any)=>{
    setI(a.id)
    setName(a.name)
    setList(a.list)
   }
   console.log(list)
    return (
        <div className='big_search'>
           <div className="searchBox">
            <div className="searchLeft">
                <div className='searchA'>
                    <span className='searchspa'>{name}</span>
                    <span className='iconfont icon-jiantou_liebiaozhankai'></span>
                    <div className='ListA'>
                       {
                        arr.map((i:any,v)=>{
                            return <div key={v} onClick={()=>clik(i)} className={v==idi?'listcolor':''}>{i.name}</div>
                        })
                       }
                    </div>
                </div>
            </div>
           <div className="searchCenter">
            <input type="text" className='searchInp'/>
            <span className='iconfont icon-zhaoxiangji'></span>
            <div className='Scroll'>
                {
                list && list.map((item:any,index)=>{
                    return <span className='scrollspa' key={index}>{item}</span>
                })
            }
            </div>
            </div>
           <div className="searchRigth">
            <span className='iconfont icon-ai219'></span>
           </div>
           <div className="sding">
            {
                list && list.map((item:any,index)=>{
                    return <span className='sdspa' key={index}>{item}</span>
                })
            }
           </div>
           </div>
        </div>
    )
}
export default Title